<template>
  <div class="portfolio">
    <div class="portfolioBox">
      <h1 class="regionalTitle">作品区域</h1>
      <div class="scrollbar">
        <div class="portfolioItemBox">
          <a
              :href="item.stash"
              target="seyu"
              class="portfolioItem"
              v-inter:inter
              v-for="item in portfolioList"
              :key="item.id"
          >
            <h3>{{item.name}}</h3>
            <p>{{item.intro}}</p>
            <span>完成日期：{{item.time}}</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
//作品集
import {reactive, onBeforeMount} from "vue";
import {http} from "../axios/index.js";

const portfolioList = reactive([])
//获取作品集
async function getPortfolio(){
  const res = await http({url: "/get_portfolio"})
  if(res.data.code === 0){
    Object.freeze(res.data.data.portfolioList)
    portfolioList.push(...res.data.data.portfolioList)
  }
}

onBeforeMount(()=>{
  getPortfolio()
})
</script>

<style scoped>
.portfolio{
  background: url("/assets/portfolio/portfolio_bg.jpg") bottom right;
}
.portfolio .portfolioBox{
  width: 90vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.portfolioBox .portfolioItemBox{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap: 20px 20px;
  padding-top: 20px;
}
.portfolioItemBox .portfolioItem{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  backdrop-filter: blur(5px);
  border-radius: 10px;
  box-shadow: 5px 5px 10px #444444;
  padding: 10px 20px 10px 15px;
  overflow: hidden;
  color: #000000;
  text-decoration: none;
  opacity: 0;
}
.portfolioItemBox .portfolioItem p{
  padding: 10px 0;
  text-indent: 2em;
}
.portfolioItemBox .portfolioItem span{
  font-size: .8rem;
  color: rgba(0,0,0,.8);
}
.portfolioItem::after{
  content: "前往仓库";
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  position: absolute;
  background: #ffffff;
  left: calc(100% - 10px);
  top: 0;
  transition: all .7s;
  border-radius: 50%;
}
.portfolioItemBox .portfolioItem:hover::after{
  left: 0;
  border-radius: 0;
}
@media (max-width: 800px){
  .portfolioBox .portfolioItemBox{
    grid-template-columns: 1fr;
  }
  .portfolioItem::after{
    display: none;
  }
}
</style>